<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
    <head>
        <th:block th:include="include :: header('请假详情')"/>
        <th:block th:include="include :: datetimepicker-css"/>
    </head>
    <body class="gray-bg">
        <div class="container-div">
            <div class="row">
                <div class="col-sm-12 search-collapse">
                    <form class="form-horizontal" th:object="${leave}" style="margin-top: 20px;">
                        <div class="form-group col-sm-6 inline">
                            <label class="col-sm-3 control-label">流程类型:</label>
                            <input type="text" class="form-control" style="width: 50%" th:field="*{flowCategoryInfo.name}" disabled/>
                        </div>
                        <div class="form-group col-sm-6 inline">
                            <label class="col-sm-3 control-label">请假天数:</label>
                            <input type="text" class="form-control" style="width: 50%" th:field="*{leaveDays}" disabled/>
                        </div>
                        <div class="form-group col-sm-6 inline">
                            <label class="col-sm-3 control-label">开始时间:</label>
                            <input type="text" class="form-control" style="width: 50%" th:value="${#dates.format(leave.beginDate, 'yyyy-MM-dd')}" disabled/>
                        </div>
                        <div class="form-group col-sm-6 inline">
                            <label class="col-sm-3 control-label">结束时间:</label>
                            <input type="text" class="form-control" style="width: 50%" th:value="${#dates.format(leave.finishDate, 'yyyy-MM-dd')}" disabled/>
                        </div>
                        <div class="form-group col-sm-6 inline">
                            <label class="col-sm-3 control-label">请假原因:</label>
                            <textarea name="reason" class="form-control" style="width: 50%" disabled>[[*{reason}]]</textarea>
                        </div>
                        <div class="form-group col-sm-6 inline">
                            <label class="col-sm-3 control-label">创建时间:</label>
                            <input type="text" class="form-control" style="width: 50%" th:value="${#dates.format(leave.createDate, 'yyyy-MM-dd')}" disabled/>
                        </div>
                        <div class="form-group col-sm-6 inline">
                            <label class="col-sm-3 control-label">请假证明:</label>
                            <a th:if="${leave.picture != null}" th:href="@{${leave.picture}}" target="_blank">
                                <img style="width: 50%;height: 100px;" th:src="@{${leave.picture}}"/>
                            </a>
                            <input th:if="${leave.picture == null}" class="form-control" style="width: 50%;" value="无" disabled/>
                        </div>
                    </form>
                </div>
                <div class="col-sm-12 select-table table-striped">
                    <table id="bootstrap-table"></table>
                </div>
            </div>
        </div>

        <th:block th:include="include :: footer"/>
        <th:block th:include="include :: datetimepicker-js"/>
        <script th:inline="javascript">
            var statusDatas = [[${@dict.getType('sys_leave_status')}]];
            var prefix = ctx + "oa/leave";
            var _url = prefix + "/getRejectReason";

            //获取驳回原因
            function getRejectReason(id) {
                $.ajax({
                    url: _url + "/" + id,
                    type: "POST",
                    dataType: "json",
                    success: function (result) {
                        $.modal.alertSuccess("驳回原因:" + result.data.rejectReason);
                    }
                })
            }

            $(function () {
                var options = {
                    url: prefix + "/leaveCheckDetail/" + [[${leave.id}]],
                    modalName: "请假",
                    columns: [{
                        checkbox: true
                    },
                        {
                            field: 'id',
                            title: 'id',
                            visible: false
                        },
                        {
                            field: 'checkSysUser.userName',
                            title: '审批人'
                        },
                        {
                            field: 'roleName',
                            title: '审批人角色'
                        },
                        {
                            field: 'status',
                            title: '审批状态',
                            formatter: function (value, row, index) {
                                return $.table.selectDictLabel(statusDatas, value);
                            }
                        },
                        {
                            field: 'checkDate',
                            title: '审批时间',
                            formatter: function (value, row, index) {
                                if ($.common.isEmpty(value)) {
                                    return "暂未审批";
                                } else {
                                    return value;
                                }
                            }
                        },
                        {
                            title: '操作',
                            align: 'center',
                            formatter: function (value, row, index) {
                                var actions = [];
                                if (row.status == 1 || row.status == 2) {
                                    actions.push('<span>暂无操作</span>');
                                } else if (row.status == 3) {
                                    actions.push('<a class="btn btn-success btn-xs" href="javascript:void(0)" onclick="getRejectReason(\'' + row.id + '\')"><i class="fa fa-edit"></i>查看原因</a> ');
                                }
                                return actions.join('');
                            }
                        }]
                };
                $.table.init(options);


            });
        </script>
    </body>
</html>